<template>
  <teleport to="body">
    <template v-if="visible">
      <div class="custom-modal-mask"></div>
      <div class="custom-modal-body">
        <div class="recharge-container">
          <a-image class="recharge-icon" :src="RechargeIcon" width="130" height="130"></a-image>
          <div class="tip-content">xxx公司，我们提供的服务将于xx年xx月xx日到期，请管理员联系客服缴纳费用</div>
          <a-button type="primary" @click="handelClose">我知道了</a-button>
        </div>
      </div>
    </template>
  </teleport>
</template>

<script setup lang="ts">
import RechargeIcon from "@/assets/images/recharge-icon.png";

defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:visible"]);

const handelClose = () => {
  emit("update:visible", false);
};
</script>

<style scoped lang="scss"></style>
